<template>
  <div class="group-manager">
    <el-tabs type="border-card">
      <el-tab-pane label="接口分组">
        <!--按钮组-->
        <el-button-group style="padding-bottom:3px">
          <el-button type="primary" size="small" @click="clickAddGroup()"><i class="el-icon-plus"></i>添加</el-button>
          <el-button type="success" size="small" @click="getApiGroup(projectId)"><i class="el-icon-refresh"></i>刷新</el-button>
        </el-button-group>

        <!--添加分组弹框-->
        <el-dialog :title='groupNmae' :visible.sync="dialogVisible" width="45%">
          <el-form ref="groupFrom" :model="apiGroupFrom">
            <el-form-item label="名称" label-width="60px" required>
              <el-input v-model="apiGroupFrom.name" placeholder="请输入分组名称"></el-input>
            </el-form-item>
            <el-form-item label="描述" label-width="60px" required>
              <el-input type="textarea" v-model="apiGroupFrom.description" :rows="3" placeholder="请输入分组描述"></el-input>
            </el-form-item>
          </el-form>
          <!--分组弹框中取消确认按钮-->
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
            <el-button type="primary" @click="addApiGroup(apiGroupFrom)" size="medium">确 定</el-button>
          </span>
        </el-dialog>

        <!--搜索框-->
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="padding-bottom:5px">
        </el-input>

        <!--分组树节点-->
        <el-scrollbar style="height:100%">
          <el-tree class="filter-tree" :data="apiGroupList.list" :props="defaultProps" :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <!--一级别的才展示-->
              <i v-if="node.level == 1" class="el-icon-folder-opened"></i>
              <span>{{ node.label }}</span>
              <!-- 1、 节点被选中后才展示-->
              <span v-if='node.isCurrent == true && node.level == 1' class="el-tree-span">
                <i class="el-icon-edit el-tree-i" @click="clickEditApiGroup(node, data)"> </i>
                <i class="el-icon-delete el-tree-i" @click="deleteAPIGroup(node, data)"> </i>
              </span>
            </span>
          </el-tree>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
import { addApiGroup, getApiGroup, deleteApiGroup, updateApiGroup } from '@/api/apiGroup'
export default {
  data () {
    return {

      projectId: 21,
      type: 'add',
      groupNmae: '添加分组',

      filterText: '',
      dialogVisible: false,

      apiGroupFrom: {
        name: '',
        description: '',

      },

      apiGroupList: {
        list: []
      },

      defaultProps: {
        children: 'children',
        label: 'label'
      }


    }
  },

  methods: {
    //点击添加按钮
    clickAddGroup () {
      this.type = 'add'
      this.apiGroupFrom = {}
      this.dialogVisible = true

    },

    //点击编辑按钮
    clickEditApiGroup (Node, data) {
      this.type = 'update'
      this.dialogVisible = true
      this.apiGroupFrom.name = data.label
      this.apiGroupFrom.description = data.desc
      this.apiGroupFrom.id = data.id
    },

    //添加接口分组
    addApiGroup (data) {
      this.apiGroupFrom.projectId = this.projectId
      this.apiGroupFrom.updateTime = new Date()
      if (this.type == 'add') {
        this.apiGroupFrom.createTime = new Date()
        addApiGroup(data).then(resp => {
          if (resp.code == 200) {
            this.dialogVisible = false
            this.$message({
              message: resp.message,
              type: 'success'
            });

            this.getApiGroup(this.projectId)
          } else {
            this.$message({
              message: resp.message,
              type: 'warning'
            });
          }
        })
      } else if (this.type == 'update') {
        updateApiGroup(data).then(resp => {
          if (resp.code == 200) {
            this.dialogVisible = false
            this.$message({
              message: resp.message,
              type: 'success'
            });

            this.getApiGroup(this.projectId)
          } else {
            this.$message({
              message: resp.message,
              type: 'warning'
            });
          }
        })
      }
    },

    // 获取项目分组
    getApiGroup (projectId) {
      this.apiGroupList.list = []
      getApiGroup(projectId).then(resp => {
        if (resp.code == 200) {
          this.apiGroupList.list = resp.data
          this.$store.commit('SET_APIGROUP', this.apiGroupList.list)
          console.log(this.$store.state.apiGroup)
        }
      })
    },

    // 删除分组
    deleteAPIGroup (Node, data) {
      this.$confirm("此操作将永久删除 『 " + data.label + " 』 分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteApiGroup(data.id).then(resp => {
          if (resp.code == 200) {
            this.$message({
              message: resp.message,
              type: 'success',
            });
            this.getApiGroup(this.projectId)
          }

        })
      });

    },

    //节点点击时触发
    handleNodeClick (data, Node) {
      this.$store.commit('SET_APIGROUPID', data.id)
      if (Node.level == 1) {
        if (data.label == "全部接口") {
          data.id = "";
        }
        this.$emit("listenTochildEvent", this.$store.state.projectId, data.id, '', 1, 30)

      } else if (Node.level == 2) {
        // this.$router.push('/interface/' + data.id)
        this.$emit("listenTochildEvent", this.$store.state.projectId, "", data.id, 1, 30);
        this.$emit("getApi", '', '', data.id, 1, 30);
      }

    },

    filterNode (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  },

  watch: {
    filterText (val, oldVal) {
      this.$refs.tree.filter(val);
    }
  },

  mounted () {
    this.projectId = this.$store.state.projectId
    this.getApiGroup(this.projectId)
  }
}
</script>


<style scoped>
.group-manager {
  height: 100%;
  background-color: white;
}

.group-manager >>> .el-tabs {
  height: 100%;
}

.group-manager >>> .custom-tree-node {
  font-size: 13px;
}
</style>


<style>
.el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
</style>